<template>
  <!-- 商品列表组件 -->
  <div class="goods-list">
    <!-- 头部路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入内容"
              v-model.trim="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="getGoodsList"
            ></el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="$emit('go-route','/addgoods')">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 商品列表模板 -->
      <div class="goods-table">
        <el-table :data="goodsList" border style="width: 100%">
          <el-table-column type="index" label="#" width="48"></el-table-column>
          <el-table-column
            prop="goods_name"
            label="商品名称"
            width="768"
          ></el-table-column>
          <el-table-column prop="goods_price" label="商品价格(元)">
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量">
          </el-table-column>
          <el-table-column label="创建时间" width="140">
            <template slot-scope="props">
              {{ props.row.add_time | formatTime("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="$emit('go-route','/editgoods/' + scope.row.goods_id)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteGoods(scope.row.goods_id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageConfig.currentPage"
          :page-sizes="pageConfig.pageSizes"
          :page-size="pageConfig.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.pageTotal"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchCont: "", //搜索内容
      //商品数据列表
      goodsList: [],
      //加载层参数配置
      loadingConfig: {
        target: "body",
        fullscreen: true,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
        text: "拼命加载中",
      },
      //分页器参数配置
      pageConfig: {
        pageTotal: 0, //分页器总条数
        pageSize: 10, //每页显示条数
        pageSizes: [5, 10, 15, 20], //可选择的每页条数
        currentPage: 1, //分页器当前页码
      },
    };
  },
  methods: {
    getGoodsList() {
      //获取商品列表数据
      //打开加载层
      var loading = this.$loading.service(this.loadingConfig);
      //发起请求
      this.$axios
        .get("/goods", {
          params: {
            query: this.searchCont,
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize,
          },
        })
        .then((res) => {
          if (res.meta.status == 200) {
            //设置商品列表数据
            this.goodsList = res.data.goods;
            //设置分页器总条数
            this.pageConfig.pageTotal = res.data.total;
            //设置当前商品页
            this.pageConfig.currentPage = parseInt(res.data.pagenum);
            //判断当前页是否为空
            if (
              this.pageConfig.pageTotal ==
              this.pageConfig.currentPage * this.pageConfig.pageSize
            ) {
              if (this.pageConfig.currentPage - 1 < 1) {
                this.handleCurrentChange(1);
              } else {
                this.handleCurrentChange(this.pageConfig.currentPage - 1);
              }
            }
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          //请求失败
          this.$message.error(error);
        })
        .finally(() => {
          //关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editGoods(id) {
      //编辑商品

    },
    deleteGoods(id) {
      //删除商品
      //调用确认弹框
      this.$confirm("此操作将永久删除该商品，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //点击确定执行删除商品
        this.deleteGoodsSubmit(id);
      });
    },
    deleteGoodsSubmit(id) {
      //根据ID删除商品
      //打开加载层
      var loading = this.$loading.service(this.loadingConfig);
      //发起删除请求
      this.$axios
        .delete("/goods/" + id)
        .then((res) => {
          if (res.meta.status == 200) {
            //提示成功信息
            this.$message.success(res.meta.msg);
            //重新渲染商品列表
            this.getGoodsList();
          } else {
            //提示错误信息
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        })
        .finally(() => {
          //关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    searchClear() {
      //清除搜索框后重新渲染默认用户列表
      this.searchCont = "";
      this.getGoodsList();
    },
    handleSizeChange(val) {
      //切换每页条数重新获取用户数据
      this.pageConfig.pageSize = val;
      this.getGoodsList();
    },
    handleCurrentChange(val) {
      //切换页码时重新获取用户数据
      this.pageConfig.currentPage = val;
      this.getGoodsList();
    }
  },
  mounted() {
    //模板挂载完成后渲染数据
    this.getGoodsList();
  },
};
</script>

<style lang="less" scoped>
.goods-table {
  margin-top: 10px;
}
.el-col {
  padding: 0 10px;
}
</style>